<template>
  <div>
    <!-- 今日数据区域 -->
    <!-- 头部 -->
    <!-- 头部导航栏 -->
    <!-- 我要开始修改le -->
    <el-container style="flex-wrap: wrap;">
      <!-- 头部导航栏 -->
      <BreadHeader></BreadHeader>
      <!-- <el-container> -->
      <XPannel>
        <template v-slot:header>
          <span>今日数据</span>
        </template>
        <template v-slot:default>
          <div class="today_data">
            <ul
              style="
                display: flex;
                justify-content: space-around;
                list-style: none;
              "
            >
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-cpu"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >待审核</span
                  ><span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_wait }}</span
                  >
                </p>
              </li>
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-s-cooperation"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >维修中</span
                  >
                  <span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_ing }}</span
                  >
                </p>
              </li>
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-s-claim"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >已完成</span
                  >
                  <span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_ok }}</span
                  >
                </p>
              </li>
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-user-solid"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >用户</span
                  >
                  <span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_users }}</span
                  >
                </p>
              </li>
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-s-home"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >库存</span
                  >
                  <span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_invents }}</span
                  >
                </p>
              </li>
              <li style="display: flex">
                <p style="height: 100%; width: 45%; background: #dddedf">
                  <i
                    class="el-icon-s-management"
                    style="
                      display: block;
                      text-align: center;
                      line-height: 60px;
                      font-size: 20px;
                    "
                  ></i>
                </p>
                <p style="height: 100%; width: 55%">
                  <span
                    style="text-align: center; display: block; margin-top: 10px"
                    >部门</span
                  >
                  <span
                    style="
                      text-align: center;
                      display: block;
                      font-size: 18px;
                      font-weight: 700;
                    "
                    >{{ totalNum_parts }}</span
                  >
                </p>
              </li>
            </ul>
          </div>
        </template>
      </XPannel>
      <!-- 快捷导航区域 -->
      <XPannel style="margin: 1px 7px">
        <template v-slot:header>
          <span>快捷导航</span>
        </template>
        <template v-slot:default>
          <div class="navigation">
            <ul style="list-style: none; display: flex">
              <router-link to="/backmanage/RepaireManage">
                <li style="width: 100px; height: 60px; cursor: pointer">
                  <p>
                    <i
                      class="el-icon-s-cooperation"
                      style="
                        display: block;
                        text-align: center;
                        font-size: 20px;
                        margin: 10px 0;
                        color: #a7a7a7;
                      "
                    ></i>
                    <span style="display: block; text-align: center"
                      >报修列表</span
                    >
                  </p>
                </li>
              </router-link>
              <router-link to="/backmanage/PermissionManage">
                <li style="width: 100px; height: 60px; cursor: pointer">
                  <p>
                    <i
                      class="el-icon-warning"
                      style="
                        display: block;
                        text-align: center;
                        font-size: 20px;
                        margin: 10px 0;
                        color: #a7a7a7;
                      "
                    ></i>
                    <span style="display: block; text-align: center"
                      >权限管理</span
                    >
                  </p>
                </li>
              </router-link>
              <router-link to="/backmanage/InventManage">
                <li style="width: 100px; height: 60px; cursor: pointer">
                  <p>
                    <i
                      class="el-icon-s-home"
                      style="
                        display: block;
                        text-align: center;
                        font-size: 20px;
                        margin: 10px 0;
                        color: #a7a7a7;
                      "
                    ></i>
                    <span style="display: block; text-align: center"
                      >库存列表</span
                    >
                  </p>
                </li></router-link
              >
              <router-link to="/backmanage/usermanage">
                <li style="width: 100px; height: 60px; cursor: pointer">
                  <p>
                    <i
                      class="el-icon-user-solid"
                      style="
                        display: block;
                        text-align: center;
                        font-size: 20px;
                        margin: 10px 0;
                        color: #a7a7a7;
                      "
                    ></i>
                    <span style="display: block; text-align: center"
                      >用户管理</span
                    >
                  </p>
                </li></router-link
              >
              <router-link to="/backmanage/MaintSearch">
                <li style="width: 100px; height: 60px; cursor: pointer">
                  <p>
                    <i
                      class="el-icon-menu"
                      style="
                        display: block;
                        text-align: center;
                        font-size: 20px;
                        margin: 10px 0;
                        color: #a7a7a7;
                      "
                    ></i>
                    <span style="display: block; text-align: center"
                      >维修分析</span
                    >
                  </p>
                </li>
              </router-link>
            </ul>
          </div>
        </template>
      </XPannel>
      <!-- </el-container> -->
      <!-- 总体概览区域 -->
      <!-- <el-container> -->
      <XPannel>
        <template v-slot:header>
          <span>总体概览</span>
        </template>
        <template v-slot:default>
          <div>
            <ul
              style="
                display: flex;
                justify-content: space-around;
                list-style: none;
                width: 100%; /* 确保父元素占满整个容器的宽度 */
                overflow: auto; /* 当内容超出时显示滚动条 */
              "
            >
              <li style="flex: 1 1 200px; min-width: 200px">
                <BarChartComponent></BarChartComponent>
              </li>
              <li style="flex: 1 1 200px; min-width: 200px">
                <RoundChart></RoundChart>
              </li>
              <li style="flex: 2 1 400px; min-width: 400px">
                <TiaoChart></TiaoChart>
              </li>
            </ul>
          </div>
        </template>
      </XPannel>
      <!-- </el-container> -->
    </el-container>
  </div>
</template>
<script>
import XPannel from "@/components/XPannel.vue";
import * as echarts from "echarts";
import BarChartComponent from "@/components/BarChartComponent.vue";
import RoundChart from "@/components/RoundChart.vue";
import TiaoChart from "@/components/TiaoChart.vue";
import http from "@/api/http";
import { mapState } from "vuex";
import BreadHeader from "@/components/BreadHeader.vue";

export default {
  components: {
    XPannel,
    BarChartComponent,
    RoundChart,
    TiaoChart,
    BreadHeader
  },
  data() {
    return {
      totalNum_wait: 0,
      totalNum_ing: 0,
      totalNum_ok: 0,
      totalNum_users: 0,
      totalNum_invents: 0,
      totalNum_parts: 0,
      obtain_name: "",
      imageUrl: "",
    };
  },
  methods: {
    
    initChart_round() {
      const chart_round = echarts.init(this.$refs.chart);
      const option_round = {
        title: {
          //   text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart_round.setOption(option_round);
    },
    total_number() {
      http
        .get("/baoxiu/total_number")
        .then((response) => {
          console.log(response);
          console.log(response.data[0]);
          this.totalNum_wait = response.data[0];
          this.totalNum_ing = response.data[1];
          this.totalNum_ok = response.data[2];
          this.totalNum_users = response.data[3];
          this.totalNum_invents = response.data[4];
          this.totalNum_parts = response.data[5];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    status_number() {
      http
        .get("/baoxiu/status_number")
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 个人信息修改--获取信息
    obtain_info() {
      const account = localStorage.getItem("account");
      http
        .get("/renyuan/edit_person/" + account)
        .then((response) => {
          console.log(response);
          this.obtain_id = response.data[0].id;
          this.obtain_name = response.data[0].uname;
          this.imageUrl = response.data[0].picture;
          // this.infoForm.username = response.data[0].uname;
          // this.infoForm.phone = response.data[0].account;
          // this.infoForm.password = response.data[0].pwd;
          // this.obtain_partname = response.data[0].pname;
          // 在这里调用login_name方法，确保数据已经获取
          this.login_name();
          this.picture_url();
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
    // 个人信息:this.obtain_name--姓名存到vuex中,方便其他组件使用
    login_name() {
      // 将数据提交到Vuex
      if (this.obtain_name) {
        // 将数据提交到Vuex
        this.$store.dispatch("setUserNameAction", this.obtain_name);
      } else {
        console.error("Vuex 出错");
      }
    },
    picture_url() {
      if (this.imageUrl) {
        // 将数据提交到Vuex
        this.$store.dispatch("setUserPictureAction", this.imageUrl);
      } else {
        console.error("Vuex 出错");
      }
    },
  },
  created() {
    this.total_number();
    this.status_number();
    this.obtain_info();
  },
  computed: {
    ...mapState(["name", "picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
};
</script>

<style scoped>
.el-card__body,
.el-main {
  padding: 20px;
  background: #f2ebeb;
}
.today_data li {
  border: 1px solid #d6d3d3;
  width: 180px;
  height: 60px;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.5s ease-in;
  -webkit-transition: color 0.5s ease-in;
}
a:hover {
  color: blue;
}
</style>